<template>
  <view class="content">
    <view class="hz">
      <view class="title">
        <view class="mark"></view>
        <text class="text1">基本信息</text>
      </view>
      <view class="main">
        <view class="item">
          <view class="left">
            <text>姓名</text>
          </view>
          <view class="right">
            <input placeholder="请输入" v-model="driverInfo.name"/>
          </view>
        </view>
        <view class="item">
          <view class="left">
            <text>身份证号</text>
          </view>
          <view class="right">
            <input placeholder="请输入" v-model="driverInfo.idcard"/>
          </view>
        </view>
        <view class="item">
          <view class="left">
            <text>手机号</text>
          </view>
          <view class="right">
            <input type="number" placeholder="请输入" v-model="driverInfo.mobile"/>
          </view>
        </view>
        <view class="item">
          <view class="left">
            <text>所属城市</text>
          </view>
          <view class="right">
            <input placeholder="请输入" v-model="driverInfo.city"/>
          </view>
        </view>
        <view class="item">
          <view class="left">
            <text>紧急联系人</text>
          </view>
          <view class="right">
            <input placeholder="请输入" v-model="driverInfo.contacts"/>
          </view>
        </view>
        <view class="item">
          <view class="left">
            <text>紧急联系人手机号</text>
          </view>
          <view class="right">
            <input type="number" maxlength="11" placeholder="请输入" v-model="driverInfo.lxrMobile"/>
          </view>
        </view>
        <view class="imgs">
          <view class="title">
            <text>身份证照片</text>
          </view>
          <view class="idcard">
            <view @click="chooseImage('idcardimages1')" class="img">
              <image v-if="!driverInfo.idcardimages1" src="/static/my/xj2.png" mode="widthFix"></image>
              <image v-else :src="domain()+driverInfo.idcardimages1" mode="widthFix"></image>
              <view  v-if="!driverInfo.idcardimages1" class="wz">
                <text class="text1">点击上传</text>
                <text class="text2">人像面</text>
              </view>
            </view>
            <view  @click="chooseImage('idcardimages2')" class="img">
              <image v-if="!driverInfo.idcardimages2" src="/static/my/xj3.png" mode="widthFix"></image>
              <image v-else :src="domain()+driverInfo.idcardimages2" mode="widthFix"></image>
              <view  v-if="!driverInfo.idcardimages2" class="wz">
                <text class="text1">点击上传</text>
                <text class="text2">国徽面</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="hz">
      <view class="title">
        <view class="mark"></view>
        <text class="text1">驾驶证信息</text>
      </view>
      <view class="main">
        <view class="item">
          <view class="left">
            <text>准驾车型</text>
          </view>
          <view class="right">
            <input placeholder="请输入" v-model="driverInfo.zjcx"/>
          </view>
        </view>
        <picker @change="dateChange($event,'starttime')" mode="date">
          <view class="item">
            <view class="left">
              <text>驾驶证有效期开始</text>
            </view>
            <view class="right">
              <input disabled placeholder="请选择" :value="driverInfo.starttime"/>
            </view>
          </view>
        </picker>
        <picker @change="dateChange($event,'endtime')" mode="date">

          <view class="item">
            <view class="left">
              <text>驾驶证有效期截止</text>
            </view>
            <view class="right">
              <input disabled placeholder="请选择" :value="driverInfo.endtime"/>
            </view>
          </view>
        </picker>
        <picker @change="dateChange($event,'lztime')" mode="date">

          <view class="item">
            <view class="left">
              <text>初次领证日期</text>
            </view>
            <view class="right">
              <input disabled placeholder="请选择" :value="driverInfo.lztime"/>
            </view>
          </view>
        </picker>

        <view class="imgs">
          <view class="title">
            <text>驾驶证照片</text>
          </view>
          <view  @click="chooseImage('licenseimage')" class="idcard idcard2">
            <view class="img">
              <image v-if="!driverInfo.licenseimage" src="/static/my/xj2.png" mode="widthFix"></image>
              <image v-else :src="domain()+driverInfo.licenseimage" mode="widthFix"></image>
              <view v-if="!driverInfo.licenseimage" class="wz">
                <text class="text1">点击上传</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 500rpx"></view>
    <!-- 按钮 -->
    <view v-if="!d" class="bottom">
<!--  goNext('/pages/my/mycar')    -->
      <view class="btn" @tap="handlerSubmit">
        <text>确定</text>
      </view>
    </view>
  </view>
</template>

<script>
import {baseUrl, domain} from "@/common/api";
import request from "@/common/request";

export default {
  data() {
    return {
      driverInfo: {
        idcardimages: [],
        d:false,
      }
    }
  },
  onLoad(query) {
    this.d = !!query.d;
    this.driverInfo.city = query.city;
    this.getInfo();
  },
  methods: {
    getInfo(){
      this.$request({
        url:'/d/driver/index'
      }).then(res=>{
        this.driverInfo = res.data;
        this.driverInfo.idcardimages1 = res.data.idcardimages[0];
        this.driverInfo.idcardimages2 = res.data.idcardimages[1];
      })
    },
    domain() {
      return domain
    },
    handlerSubmit(){
      console.log(this.driverInfo)
      const verify = [
          ['name','请输入姓名'],
          ['idcard','请输入身份证'],
          ['mobile','请输入手机号'],
          ['city','请输入所属城市'],
          ['contacts','请输入紧急联系人'],
          ['lxrMobile','请输入紧急联系人电话'],
          ['idcardimages1','请上传身份证正面'],
          ['idcardimages2','请上传身份证反面'],
          ['zjcx','请输入准驾车型'],
          ['starttime','请选择驾驶证有效期开始'],
          ['endtime','请选择驾驶证有效期截止'],
          ['lztime','请选择初次领证日期'],
          ['licenseimage','请上传驾驶证'],
      ]
      for (const [filed,msg] of verify) {
        if (!this.driverInfo[filed]) return uni.showToast({
          title:msg,
          icon:'none'
        })
      }
      request({
        method:'POST',
        url:'/d/driver/add',
        data:{
          ...this.driverInfo,
          idcardimages:[this.driverInfo.idcardimages1,this.driverInfo.idcardimages2]
        }
      }).then(res=>{
         uni.navigateTo({
           url:'/pages/my/mycar'
         })
      })
    },
    //上传图片
    chooseImage(field){
      uni.chooseImage({
        count:1,
        crop:{
          width:100,
          height:100
        },
        success:(result)=>{
          console.log(result)
          uni.uploadFile({
            url:baseUrl+'/common/upload?token='+uni.getStorageSync('token'),
            method:'POST',
            name: 'file',
            filePath:result.tempFilePaths[0],
            data:{
              token:uni.getStorageSync('token'),
              filePath:result.tempFilePaths[0],

            },
            success:(res)=>{
              this.$set(this.driverInfo,field,JSON.parse(res.data).data.url)
            }
          })
        }
      })

    },
    //日期选择
    dateChange({detail: {value}}, field) {
      this.$set(this.driverInfo, field, value)
    },
    //跳转
    goNext(url) {
      uni.navigateTo({
        url: url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding-bottom: 100rpx;

  .hz {
    margin-top: 20rpx;
    background-color: #fff;
    padding: 20rpx 30rpx;

    .title {
      display: flex;
      line-height: 50rpx;

      .mark {
        margin-top: 10rpx;
        width: 6rpx;
        height: 30rpx;
        background-color: #8662F6;
        border-radius: 10rpx;
      }

      .text1 {
        margin-left: 15rpx;
        font-size: $uni-font-size-lg;
        font-weight: bold;
      }
    }

    .main {
      margin-top: 10rpx;

      .item {
        display: flex;
        padding: 30rpx 0;
        border-bottom: 1rpx solid #F4F4F4;

        .left {
          color: #999;
          font-weight: bold;
        }

        .right {
          margin-left: auto;

          input {
            text-align: right;
          }
        }
      }

      .imgs {
        .title {
          line-height: 50rpx;
          font-size: $uni-font-size-lg;
          font-weight: bold;
          padding: 30rpx 0;
        }

        .idcard {
          display: flex;
          justify-content: space-between;
          padding: 0 15rpx;

          .img {
            width: 320rpx;
            height: 180rpx;
            border: 1rpx solid #ddd;
            border-radius: 10rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            image {
              width: 130rpx;
            }

            .wz {
              margin-top: 10rpx;
              line-height: 50rpx;

              .text1 {
                color: #6F6F6F;
                font-weight: bold;
              }

              .text2 {
                margin-left: 10rpx;
                color: #9F84F5;
              }
            }
          }
        }

      }

    }
  }

  .bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 180rpx;
    background-color: #fff;
    border-top: 1rpx solid #E7E1F7;

    .btn {
      margin: 20rpx auto 0;
      width: 630rpx;
      height: 100rpx;
      line-height: 100rpx;
      border-radius: 20rpx;
      text-align: center;
      background-color: #895FFF;
      font-size: $uni-font-size-lg;
      font-weight: bold;
      letter-spacing: 2rpx;
      color: #fff;
    }
  }
}
</style>
<style>
page {
  background-color: #F6F6F6;
}
</style>
